import React from 'react'
import { Link } from 'react-router-dom'
import StatusBar from '../components/StatusBar'

const Settings: React.FC = () => {
  return (
    <div className="min-h-screen bg-[#121212] text-white pb-20">
      <StatusBar />

      {/* App Header */}
      <div className="px-4 pt-2 pb-3 flex items-center">
        <div className="text-xl font-bold">Settings</div>
        <Link to="/profile" className="ml-auto text-[#ff375f]">
          Done
        </Link>
      </div>

      {/* Settings Content */}
      <div className="px-4 py-2">
        {/* Account Settings */}
        <div className="mb-6">
          <div className="text-sm font-semibold text-[#ff375f] uppercase mb-2 px-4">Account</div>
          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden">
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-user text-[#888] w-6 mr-4"></i>
              <div>Personal Information</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-key text-[#888] w-6 mr-4"></i>
              <div>Change Password</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-credit-card text-[#888] w-6 mr-4"></i>
              <div>Payment Methods</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4">
              <i className="fas fa-crown text-[#888] w-6 mr-4"></i>
              <div>
                <div>Subscription</div>
                <div className="text-xs text-[#888] mt-1">Premium Plan - $19.99/month</div>
              </div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
          </div>
        </div>

        {/* Privacy & Security */}
        <div className="mb-6">
          <div className="text-sm font-semibold text-[#ff375f] uppercase mb-2 px-4">Privacy & Security</div>
          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden">
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-shield-alt text-[#888] w-6 mr-4"></i>
              <div>Privacy Settings</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-eye-slash text-[#888] w-6 mr-4"></i>
              <div>
                <div>Browsing History</div>
                <div className="text-xs text-[#888] mt-1">Manage your viewing history</div>
              </div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-fingerprint text-[#888] w-6 mr-4"></i>
              <div>
                <div>App Lock</div>
                <div className="text-xs text-[#888] mt-1">Secure with Face ID / Pin</div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer ml-auto">
                <input type="checkbox" className="sr-only peer" defaultChecked />
                <div className="w-11 h-6 bg-[#2a2a2a] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#ff375f]"></div>
              </label>
            </div>
            <div className="flex items-center p-4">
              <i className="fas fa-bell text-[#888] w-6 mr-4"></i>
              <div>
                <div>Discreet Notifications</div>
                <div className="text-xs text-[#888] mt-1">Hide content in notifications</div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer ml-auto">
                <input type="checkbox" className="sr-only peer" defaultChecked />
                <div className="w-11 h-6 bg-[#2a2a2a] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#ff375f]"></div>
              </label>
            </div>
          </div>
        </div>

        {/* Preferences */}
        <div className="mb-6">
          <div className="text-sm font-semibold text-[#ff375f] uppercase mb-2 px-4">Preferences</div>
          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden">
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-globe text-[#888] w-6 mr-4"></i>
              <div>
                <div>Language</div>
                <div className="text-xs text-[#888] mt-1">English (US)</div>
              </div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-moon text-[#888] w-6 mr-4"></i>
              <div>Dark Mode</div>
              <label className="relative inline-flex items-center cursor-pointer ml-auto">
                <input type="checkbox" className="sr-only peer" defaultChecked />
                <div className="w-11 h-6 bg-[#2a2a2a] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#ff375f]"></div>
              </label>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-mobile-alt text-[#888] w-6 mr-4"></i>
              <div>
                <div>Data Saver</div>
                <div className="text-xs text-[#888] mt-1">Reduce data usage</div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer ml-auto">
                <input type="checkbox" className="sr-only peer" />
                <div className="w-11 h-6 bg-[#2a2a2a] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#ff375f]"></div>
              </label>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-download text-[#888] w-6 mr-4"></i>
              <div>
                <div>Download Quality</div>
                <div className="text-xs text-[#888] mt-1">High</div>
              </div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4">
              <i className="fas fa-video text-[#888] w-6 mr-4"></i>
              <div>
                <div>Autoplay</div>
                <div className="text-xs text-[#888] mt-1">Play videos automatically</div>
              </div>
              <label className="relative inline-flex items-center cursor-pointer ml-auto">
                <input type="checkbox" className="sr-only peer" defaultChecked />
                <div className="w-11 h-6 bg-[#2a2a2a] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#ff375f]"></div>
              </label>
            </div>
          </div>
        </div>

        {/* Support */}
        <div className="mb-6">
          <div className="text-sm font-semibold text-[#ff375f] uppercase mb-2 px-4">Support</div>
          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden">
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-question-circle text-[#888] w-6 mr-4"></i>
              <div>Help Center</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-comment-alt text-[#888] w-6 mr-4"></i>
              <div>Contact Support</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-bug text-[#888] w-6 mr-4"></i>
              <div>Report a Problem</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-scroll text-[#888] w-6 mr-4"></i>
              <div>Terms of Service</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
            <div className="flex items-center p-4">
              <i className="fas fa-user-secret text-[#888] w-6 mr-4"></i>
              <div>Privacy Policy</div>
              <i className="fas fa-chevron-right text-[#666] ml-auto"></i>
            </div>
          </div>
        </div>

        {/* Account Actions */}
        <div className="mb-6">
          <div className="bg-[#1e1e1e] rounded-xl overflow-hidden">
            <div className="flex items-center p-4 border-b border-[rgba(255,255,255,0.05)]">
              <i className="fas fa-sign-out-alt text-red-500 w-6 mr-4"></i>
              <div className="text-red-500">Sign Out</div>
            </div>
            <div className="flex items-center p-4">
              <i className="fas fa-trash-alt text-red-500 w-6 mr-4"></i>
              <div className="text-red-500">Delete Account</div>
            </div>
          </div>
        </div>

        {/* App Version */}
        <div className="text-center text-[#666] text-xs mt-10 mb-24">
          <p>FansAI Version 1.0.0</p>
          <p className="mt-1">© 2024 FansAI. All rights reserved.</p>
        </div>
      </div>
    </div>
  )
}

export default Settings 